<template>
  <el-row class="content">
    <!--日期和选择-->
    <el-row>
      <select style="height: 25px" class="select" @change="getValue">
        <option :value="key" :selected="game === key" v-for="(valuess,key,index) in memberGames" :key="key">{{valuess}}</option></select>
        <span style="margin-left: 5px">日期：</span><el-date-picker class="myClass" v-model="timess" @change="getdate" type="date" placeholder="选择日期"></el-date-picker>
    </el-row>
    <!--表格-->
    <el-row>
      <table border="0" cellspacing="1" cellpadding="0" class="table-box">
        <tr>
          <th class="tableth" height="30px" v-for="(item,index) in memberresult.title1" :key="index">{{item}}</th>
        </tr>
        <tr class="tablethtwo" v-for="(items,index) in memberresult.data1" :key="index">
          <td class="tabletd" v-for="(value, key, index) in items" :key="index">
            <span v-if="!(value instanceof  Array)" :class="{colorred:value=='龙',colorredc:value=='和'}">{{value}}</span>

            <span class="menu1" v-if="(value instanceof  Array)">
                <span  :class="{
                T_PK10:game ==='bjpk10'||game ==='azlucky10'||game ==='alpha'||game ==='beta'||game ==='xyft'||game ==='jssc',
                T_KL8:game ==='bjkl8' || game ==='azlucky20',T_SSC:game ==='cqssc'||game ==='azlucky5'||game ==='jsssc'||
                game ==='xjssc'||game ==='tjssc'||game ==='bsssc'||game ==='gama',T_KLSF:game ==='gdklsf'||game ==='azlucky8',
                XYNCTerm:game ==='cqxync',T_K3:game ==='gxk3',T_11X5:game ==='gd115',T_GXKLSF:game ==='gxklsf',
                }" v-if="key==='开出号码'">
                  <b class="bb" v-for="(item,index) in value" :key="index" :class="`b${item}`"></b>
                </span>

              <span class="spanas"
                :class="{colorred:iteml=='龙',colorreda:iteml=='大',colorredb:iteml=='双'}"
                v-if="key!=='开出号码'" v-for="(iteml,indexl) in value" :key="indexl">{{iteml}}
              </span>
          </span>
          </td>
        </tr>
        <!--<tr v-if="memberresult.data1.length <1" style="text-align: center;line-height: 68px">暂无数据</tr>-->
      </table>
    </el-row>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射
  import {result} from '@/api/member'

  export default {
    computed: {
      ...mapGetters(['memberGames', 'memberresult']),
    },
    data() {
      return {
        loading: false,
        userMap: userMap, // 用户字段映射
        currentPage: 1,
        pageSize: 10,
        pickDate: null,
        timess:new Date(),
        game:this.$store.getters.memberGameSelected, //类型参数
        dates:this.timess,  //日期参数
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      }
    },

    // 数据格式化
    filters: {},
    async created() {
      await this.fetchData();
      await this.result();
      console.log('520',this.memberresult)
    },
    methods: {
      //获取日期
      getdate(){
        var timestamp = (this.timess);
        var year = timestamp.getFullYear();
        var month = timestamp.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var date = timestamp.getDate();
        date = date < 10 ? '0' + date : date;
        this.dates = parseInt((year + '')+(month + '')+(date + ''));
        this.result()
      },
      //获取下拉框值
      getValue(val){
        this.game = val.target.value;
        console.log('mmn',this.game)
        this.result()
      },
      //开奖结果
      async result(){
        await this.$store.dispatch('Lotteryresults',{
          game:this.game,
          date:this.dates,
        })
      },
      //分页器
      async fetchData() {
        await this.$store.dispatch('MemberOrdersHistory', {
          page: this.currentPage,
          'per-page': this.pageSize,
        })
      },
      // 当前页变化
      async pickerChange(value) {
        await this.fetchData()
      },
    },
    watch: {
      $route(to, from) {},
    },
  }
</script>
<style scoped>
  .content {
    background: #fff;
    min-height: 950px;
    width: 1700px;
    padding: 5px;
  }
  .select{
    width: 120px;
  }
  .table-box{
    margin-top: 5px;
    border-collapse: collapse;
    border: 1px solid #aaa3a3;
    width: 99.5%;
  }
   .table-box .tableth{
    text-align: center;
    border: 1px solid #aaa3a3;
    background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
  }
  .table-box .tablethtwo:hover{
     background: #c3d9f1;
     cursor: pointer;
   }
  .table-box .tabletd{
    text-align: center;
    border: 1px solid #b9c2cb;
  }
  .table-box .tabletd span {
    display: inline-block;

  }
  .table-box .tabletd .spanas{
    min-width: 30px;
    margin-left: 10px;
  }
  .bb{
    display: inline-block;
    margin-top: 3px;
  }
  .colorred{
    color: red;
  }
  .colorreda{
    color: red;
  }
  .colorredb{
    color: red;
  }
  .colorredc{
    color: #2836f4;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 170px!important;
  }
</style>
<style>
  .myClass input.el-input__inner{
    height: 28px!important;
    line-height: 28px!important;
  }
  .myClass .el-input__icon{
    line-height: 28px!important;
  }
</style>
